<template>
	<view class="container">
		<!--搜索框-->
		<view class="search-box" :style="{marginTop: `${ getSystemInfo.navBarHeight }px`}">
			<navagationBar backgroundColor="#F5F5F5">
				<template>
					<view class="search" >
						<view class="search-map" @click="handleCityIndex">
							<!-- <uni-icons type="location-filled" size="20"></uni-icons> -->
							<text>{{ cityName }}</text>
							<u-icon name="arrow-down-fill" color="#000000" size="20"></u-icon>
						</view>
						<view class="search-input" @click="handleClick">
							<u-search
								placeholder="请输入门店或地址" 
								:height="getSystemInfo.menuHeight * 2" 
								v-model="value" 
								:showAction="false" 
								bgColor="#ffffff" 
								placeholderColor="#CCCCCC"
								disabled
							>
							</u-search>
						</view>
					</view>
				</template>
			</navagationBar>
		</view>

		
		<!-- 数据列表组件 -->
		<List
			ref="list"
			top="64"
			:popupTop="getSystemInfo.navBarHeight + 44"
			:popupShadowIndex="0"
			@triggerShow="isShow = false"
		/>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import List from '@/pages/store/components/list.vue'
	import navagationBar from '@/components/navigationBar.vue'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	
	export default {
		components: {
			List,
			navagationBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo', 'getLocation'])
		},
		data() {
			return {
				value: '',
				cityName: '',
				
				isShow: true,	// 用于onshow判断是否调用接口
			};
		},
		methods: {
			...mapMutations('global', ['setNowLocation', 'getNowLocation']),
			// 获取当前位置
			getNowAddress(){
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: res => {
						const { longitude, latitude } = res
						// 调试放出来方便调接口
						// this.reverseAddress(longitude, latitude)
						// 
					},
					fail: res => {
						console.log('fail', res);
					}
				});
			},
			// 调用腾讯SDK获取当前定位城市信息
			reverseAddress(longitude,latitude){
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				
				qqmapsdk.reverseGeocoder({
					// location: {
					// 	longitude,
					// 	latitude
					// },
					success: async (res) => {
						const { city: cityName } = res.result.ad_info
						const { location } = res.result
						await this.setNowLocation({
							cityName,
							longitude: location.lng,
							latitude: location.lat
						})
						
						this.cityName = cityName
						this.$refs.list.init();
						this.$refs.list.initData();
					},
					fail: (error) => {
						console.error('error', error);
					},
				})
			},
			handleCityIndex(){
				this.isShow = true
				uni.navigateTo({
					url: '/components/cityIndexList?source=storeList'
				})
			},
			handleClick(){
				uni.navigateTo({
				  url: `/storePack/list/searchList`
				})
			},
			async getNowCity(){
				const { cityName } = this.getLocation
				if(cityName){
					this.cityName = cityName
					this.$refs.list.initData();
					this.$refs.list.init();
				}else {
					await this.getNowAddress()
				}
			}
		},
		onTabItemTap(item) {
			// tab 点击时执行
			this.$store.state.global.tabBarIndex = item.index
		},
		onShow(){
			if(this.isShow){
				this.getNowCity()
			}
		},
		onReachBottom() {
			if (this.$refs.list.data.length >= this.$refs.list.total) {
				this.$refs.list.loadMoreText = "没有更多数据了!"
				return;
			}
			this.$refs.list.showLoadMore = true;
			this.$refs.list.formDatas.pageNum += 1
			this.$refs.list.initData()
		},
		onPullDownRefresh() {
			this.$refs.list.loadMoreText = "加载中..."
			this.$refs.list.data = []
			this.$refs.list.formDatas.pageNum = 1
			this.$refs.list.initData();
		},
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	overflow: hidden;
	.search-box {
		// height: 64px;
	}
	.search {
		z-index: 10;
		// height: 64px;
		height: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #F5F5F5;
		box-sizing: border-box;
		overflow: hidden;
		// padding-left: 20rpx;
		.search-map {
			display: flex;
			align-items: center;
			font-size: 14px;
			padding-right: 20rpx;
			max-width: 64px;
			line-height: 14px;
			text {
				color: #000000;
				margin-right: 8rpx;
			}
			/deep/ .u-icon {
				margin-top: 6rpx;
			}
		}
		.search-input {
			width: 60%;
			height: 100%;
			/deep/ .u-search {
				height: 100%;
			}
			// /deep/ .uni-easyinput__content {
			// 	border-radius: 16px;
			// 	height: 32px;
			// 	background-color: rgba(243, 243, 243, 1) !important;
			// }
			/deep/ .u-icon__icon {
				font-size: 22px !important;
			}
		}
	}
}
</style>
